<template>
    <div>
        <Nav></Nav>
        <v-title>创建订单</v-title>
        <el-row>
            <el-col :span="6" :offset="4">
                <h2>创建订单</h2>
            </el-col>
        </el-row>
        <el-row class="order">
            <div>
                <div>
                    <div>
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>订单信息</span>
                            </div>
                            <br />
                            <div>
                                <el-steps :active="1">
                                    <el-step title="步骤 1" description="填写订单信息"></el-step>
                                    <el-step title="步骤 2" description="开始支付"></el-step>
                                    <el-step title="步骤 3" description="支付完成"></el-step>
                                </el-steps>
                            </div>
                            <div class="text item">
                                <el-divider content-position="left">个人信息部分</el-divider>
                                <div>
                                    <el-row>
                                        <el-col :span="4" :offset="2">
                                            <span class="detailContent">用户名</span>
                                        </el-col>
                                        <el-col :span="6">
                                            <span class="detailContentNormal">{{userInfo.username}}</span>
                                        </el-col>
                                    </el-row>
                                    <br />
                                    <el-row>
                                        <el-col :span="4" :offset="2">
                                            <span class="detailContent">收件人</span>
                                        </el-col>
                                        <el-col :span="6">
                                            <span class="detailContentNormal">{{userInfo.nickname}}</span>
                                        </el-col>
                                    </el-row>
                                    <br />
                                    <el-row>
                                        <el-col :span="4" :offset="2">
                                            <span class="detailContent">地址</span>
                                        </el-col>
                                        <el-col :span="14">
                                            <el-input v-model="address" placeholder="请输入地址" :min="1" />
                                        </el-col>
                                    </el-row>
                                    <br />
                                    <el-row>
                                        <el-col :span="4" :offset="2">
                                            <span class="detailContent">备注</span>
                                        </el-col>
                                        <el-col :span="14">
                                            <el-input v-model="remark" placeholder="备注可填可不填"/>
                                        </el-col>
                                    </el-row>
                                    <br />
                                    <el-row>
                                        <el-col :span="4" :offset="2">
                                            <span class="detailContent">支付方式</span>
                                        </el-col>
                                        <el-col :span="14">
                                            <el-radio-group v-model="payType">
                                                <el-radio :label="1">
                                                    <el-image style="width: 170px; height: 49px"
                                                        :src="require('@/pages/Order/image/微信支付.png')" />
                                                </el-radio>
                                                <el-radio :label="2">
                                                    <el-image style="width: 50px; height: 50px"
                                                        :src="require('@/pages/Order/image/支付宝.jpg')" />
                                                </el-radio>
                                            </el-radio-group>
                                        </el-col>
                                    </el-row>
                                </div>
                                <el-divider content-position="left">商品信息部分</el-divider>
                                <div v-for="(cartInfo, key) in cartInfo.cartGoodsVo" v-bind:key="key">
                                    <el-row>
                                        <el-col :span="6" :offset="2"><img :src="cartInfo.gameGoods.mainPicUrl"
                                                width="250" height="192" /></el-col>
                                        <el-col :span="12" :offset="4">
                                            <el-row>
                                                <router-link :to="`/gameGoodsDetail/${cartInfo.gameGoods.id}`">
                                                    {{cartInfo.gameGoods.name}}
                                                </router-link>
                                            </el-row>
                                            <br />
                                            <el-row>
                                                <el-col :span="4">
                                                    <span class="detailContent">价格</span>
                                                </el-col>
                                                <el-col :span="6">
                                                    <span
                                                        class="detailContentPrice">￥{{cartInfo.gameGoods.price}}</span>
                                                </el-col>
                                            </el-row>
                                            <br />
                                            <el-row>
                                                <el-col :span="4">
                                                    <span class="detailContent">数量</span>
                                                </el-col>
                                                <el-col :span="6">
                                                    <span class="detailContentNum">{{cartInfo.num}}</span>
                                                </el-col>
                                            </el-row>
                                            <br />
                                        </el-col>
                                    </el-row>
                                    <el-divider />
                                </div>
                            </div>
                            <el-row>
                                <el-col :span="2" :offset="18">
                                    总价：
                                </el-col>
                                <el-col :span="4">
                                    <span class="detailContentPrice">￥{{cartInfo.money}}</span>
                                </el-col>
                            </el-row>
                            <br />
                            <el-row>
                                <el-col :offset="19">
                                    <el-col :md="24">
                                        <el-button type="success" round @click="takeOrder">创建订单~</el-button>
                                    </el-col>
                                </el-col>

                            </el-row>
                        </el-card>
                        <br /><br />
                    </div>
                </div>
                <el-backtop />
            </div>
        </el-row>
    </div>
</template>

<script>
import Nav from "@/components/Nav";
import VTitle from "@/components/Title";
import { getCartInfo } from "@/api/index";
export default {
    created() {
        this.getCartInfo();
    },
    data() {
        return {
            cartInfo: {
                cartGoodsVo: []
            },
            userInfo: this.$store.state.user.user,
            address: '',
            payType: 1,
            remark: ''
        };
    },
    components: {
        Nav,
        VTitle,
    },
    methods: {
        async getCartInfo() {
            let that = this;
            await getCartInfo().then((res) => {
                if (res.code == "200") {
                    if (res.data != null) {
                        that.cartInfo = res.data;
                        this.hasGoods()
                    }
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        hasGoods() {
            if (this.cartInfo.cartGoodsVo.length <= 0) {
                this.$message.error("当前不能创建订单~因为购物车没有东西吖~")
                this.$router.push("/cart")
            }
        },
        
        takeOrder() {
            if (this.address == null || this.address == '') {
                this.$message.error("请填写地址~")
                return;
            }
            let param = {
                address: this.address,
                payType: this.payType,
                remark: this.remark
            }
            this.$router.push({
                path:'/createOrderStep2',
                query:{
                    param
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
h2 {
    float: left;
    height: 34px;
    line-height: 34px;
    font-size: 24px;
    position: relative;
    margin-bottom: 20px;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
}

.order {
    width: 50%;
    margin-left: 25%;
}

a {
    font-size: 25px;
    color: #2abaca;
    font-weight: bolder;
}

.old-name {
    color: #000;
}

.detailContent {
    font-size: 12px;
    line-height: 20px;
    display: block;
    color: #9497a0;
}

.detailContentPrice {
    font-size: 16px;
    line-height: 20px;
    display: block;
    color: red;
    font-weight: bold;
}

.detailContentNum {
    font-size: 16px;
    line-height: 20px;
    display: block;
    color: black;
    font-weight: bold;
}

.detailContentNormal {
    font-size: 16px;
    line-height: 20px;
    display: block;
    color: black;
}
</style>